<!-- 离场管理 -->
<script>
import HPCommonPage from "@/components/HPCommonPage";
import HPTable from "@/components/HPTable";
import HPDialog from '@/components/HPDialog';
import { fetchPeopleOutLists } from "@/fetch/modules/peopleout";
import { exitTableColumn } from "../js/column";
import { exitStatus } from "../js/status";
import { modiftUserOut } from "@/fetch/modules/peopleout";
import { approverOption } from "@/views/outsourcedPM/js/status";
import getQuery from '@/utils/mixins/getQuery';
import approveFlowPath from '@/utils/mixins/approveFlowPath';
import { remind } from '@/fetch/api'
import {
  findOutUser,
  findReportObject,
  createSelective,
} from "@/fetch/modules/ectrance";

export default {
  mixins: [getQuery, approveFlowPath],
  created() {
    this.fetchTableData();
  },
  methods: {
    // 提醒
    onRemind(row) {
      remind({
        originId: row.orderId,
        remindCode: 'remind_04'
      }).then(res => {
        const { state, message } = res.data
        if(state === '0000') {
          this.$message({
            message: message,
            type: 'success',
            duration: 1500,
          });
          this.fetchTableData()
        }
      })
    },
    findReportObject(val) {
      if (!val) return;
      findReportObject({ nickName: val, deptCode: this.people.deptCode }).then(
        (res) => {
          const { data, state } = res.data;
          if (state === "0000") {
            this.reportOptions = data.map((item) => {
              return {
                label: `${item.nickName}(${item.workCode})`,
                coded: `${item.adAccount}&&${item.userName}`,
              };
            });
          }
        }
      );
    },
    enterLeave(row) {
      const params = {
        id: row.id,
        outState: 2,
      };
      modiftUserOut(params).then((res) => {
        const { state, message } = res.data;
        if (state === "0000") {
          this.$message.success(message);
          this.fetchTableData();
        }
      });
    },
    // * 离场申请
    onToEntrance(row) {
      // console.log(row)
      this.isShowLeavePup = true;
      (this.people.offterId = row.offId),
        (this.people.workCode = row.workCode),
        this.findOutUser();
    },
    findOutUser() {
      findOutUser({ workCode: this.people.workCode }).then((res) => {
        const { data } = res;
        if (data.state === "0000") {
          // console.log(res.data.data)
          this.people = {
            offterId: this.people.offterId,
            ...data.data,
            outDate: "",
          };
        }
      });
    },
    // * 获取列表数据
    async fetchTableData() {
      this.isLoad = true;
      const params = {
        ...this.selectData,
        pageNum: this.selectData.pageCurrent
      }
      const { data } = await fetchPeopleOutLists(params);
      this.isLoad = false;
      if (data.state === "0000") {
        const { list = [], total, lastPage, pageNum } = data.data || {};
        this.tableData = list || [];
        this.totals = total;
        if(pageNum > lastPage && lastPage > 0) {
          this.selectData.pageCurrent = lastPage
          this.fetchTableData()
        }
      }
    },
    // * 查询
    onSearch() {
      this.selectData.pageCurrent = 1;
      this.searchData = { ...this.selectData }
      this.fetchTableData();
    },
    // * 查看
    onLookDetail(row) {
      // console.log(row);
      this.$router.push({
        path: `/peopleout/detail/${row.id}`,
        query: {
          stus: `${row.status}`,
          needsCvId: row.needsCvId,
          formQuery: JSON.stringify(this.searchData),
        },
      });
    },
    closePeopleInfoPup() {
      this.isShowLeavePup = false;
    },
    // * 切换页条数
    handleSizeChange(val) {
      this.selectData.pageSize = val;
      this.searchData = { ...this.selectData }
      this.onSearch();
    },
    // * 切换页数
    handleCurrentChange(val) {
      this.selectData.pageCurrent = val;
      this.searchData = { ...this.selectData }
      this.fetchTableData();
    },
    sendLeave() {
      this.$refs["people"].validate((valid) => {
        if (valid) {
          const params = {
            ...this.people,
            workOverCode: this.people.workOverCode.split("&&")[0],
            workOverName: this.people.workOverCode.split("&&")[1],
          };
          // console.log(this.people)
          // return
          createSelective(params).then((res) => {
            const data = res.data;
            if (data.state === "0000") {
              this.$message.success("操作成功");
              this.isShowLeavePup = false;
              this.fetchTableData();
            }
          });
        }
      });
    },
  },
  data() {
    return {
      selectData: {
        // * 条件查询对象
        positionName: "",
        deptName: "",
        name: "",
        beginDate: "",
        endDate: "",
        status: "",
        pageCurrent: 1,
        pageSize: 10,
      },
      tabsList: exitStatus,
      tableHeaderItems: exitTableColumn,
      approverStatus: approverOption,
      tableData: [],
      isLoad: false,
      totals: 0,
      people: {
        outDate: "",
      },
      isShowLeavePup: false,
      checkForm: {
        deptName: [{ required: true, message: "部门不能为空" }],
        telphone: [{ required: true, message: "请输入电话" }],
        workOverCode: [{ required: true, message: "请输入交接人" }],
        outDate: [{ required: true, message: "请选择最后到岗时间" }],
      },
      reportOptions: [],
    };
  },
  components: {
    HPCommonPage,
    HPTable,
    HPDialog
  },
};
</script>

<template>
  <div class="exit-management-container">
    <HPCommonPage :titleText="'外包人员管理 / 离场管理'">
      <template v-slot:searchForm>
        <el-form
          :inline="true"
          :model="selectData"
          class="form-box res-form-box"
        >
          <el-form-item label="姓名：">
            <el-input
              v-model="selectData.name"
              clearable
              placeholder="请输入员工姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位名称：">
            <el-input
              v-model="selectData.positionName"
              clearable
              placeholder="请输入岗位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门：">
            <el-input
              v-model="selectData.deptName"
              clearable
              placeholder="请输入部门名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="入场时间：">
            <el-date-picker
              v-model="selectData.beginDate"
              clearable
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离场时间：">
            <el-date-picker
              v-model="selectData.endDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离场状态：">
            <el-select
              v-model="selectData.status"
              placeholder="请选择离场状态"
              clearable=""
            >
              <template v-for="item in tabsList">
                <el-option
                  v-if="!item.hidden"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                >
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态：">
            <el-select
              v-model="selectData.approvalState"
              placeholder="请选择离场审批状态"
              clearable=""
              style="min-width: 176px"
            >
              <el-option
                v-for="item in approverStatus"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:searchFormbtn>
        <el-button type="success" size="small" @click="onSearch"
          >查询</el-button
        >
      </template>
      <template v-slot:table>
        <HPTable
          :tableHeaderItems="tableHeaderItems"
          :tableData="tableData"
          :loading="isLoad"
        >
        </HPTable>
      </template>
      <template v-slot:pagination>
        <el-pagination
          v-if="totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="selectData.pageCurrent"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="selectData.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        >
        </el-pagination>
      </template>
    </HPCommonPage>
    <el-dialog
      title="离场指引"
      :visible.sync="isShowLeavePup"
      width="732px"
      class="leave-dialog"
    >
      <p>
        Hi外包小伙伴，<br />
        请先与你所属的供应商公司进行沟通,确认一致后再发起外包离场流程。<br />
        同时需将公司配备的IT办公资产(电脑、配件等)对应归还至以下职场地点：<br />
        ①上海（两个地点均可还）：杨浦区国正中心1号楼5层茶水间后b-9-6（v_zhaoaisi）或国正中心3号楼6层货梯口（狗王IB）；<br />
        ②北京：朝阳区东煌大厦9层9C-136（v_liujiye）、9C-135（v_
        chenshaoguang）；<br />
        ③南京：建邺区新城科技园国际研发总部园2号楼18层员工服务中心；<br />
        ④武汉：洪山区光谷软件园六期E3栋光谷E城4F-C-03-01（Oven）;<br />
        ⑤成都：高新区紫光芯云中心B座17F009 （v_liuning）;<br />
        ⑥芜湖：鸠江区国家广告产业园火炬楼3楼(福利酱)；<br />
        ⑦广州：海珠区保利发展广场35楼营销区域后面（勾勾）；<br />
        在离场前,需主动与外包人员汇报对象沟通,及时根据要求完成相关工作交接<br />
      </p>
      <el-form
        :model="people"
        :inline="true"
        :class="'form-box'"
        :rules="checkForm"
        label-width="120px"
        ref="people"
        style="text-align: left"
      >
        <el-form-item label="昵称：" prop="nickName">
          <el-input
            id="nickName"
            v-model="people.nickName"
            auto-complete="off"
            :disabled="true"
            placeholder="请输入员工编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="surName">
          <el-input
            id="surName"
            v-model="people.surName"
            auto-complete="off"
            :disabled="true"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属部门：" prop="deptName">
          <el-input
            id="deptName"
            v-model="people.deptName"
            auto-complete="off"
            :disabled="true"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人电话：" prop="telphone">
          <el-input
            id="telphone"
            v-model="people.telphone"
            auto-complete="off"
            placeholder="请输入申请人电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="交接人：" prop="workOverCode">
          <el-select
            id="workOverCode"
            v-model="people.workOverCode"
            clearable
            :filterable="true"
            :remote="true"
            :remote-method="findReportObject"
            placeholder="请输入昵称"
          >
            <el-option
              v-for="(optionItem, index) in reportOptions"
              :key="index"
              :label="optionItem['label']"
              :value="optionItem['coded']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号：" prop="workCode">
          <el-input
            id="workCode"
            v-model="people.workCode"
            auto-complete="off"
            :disabled="true"
            placeholder="请输入员工工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="最后工作日：" prop="outDate">
          <el-date-picker
            id="outDate"
            v-model="people.outDate"
            type="date"
            :value-format="'yyyy-MM-dd'"
            placeholder="请选择最后工作日"
            style="width: 190px"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <p class="tip">声明：</p>
      <p>
        在提交本流程时，即代表你已查收并同意以下申明：<br />
        ①自离场之日起，将不再以任何方式参与原工作权限的所有工作；<br />
        ②不会擅自更改权限进入公司系统获取、更新公司资源；<br />
        ③如本人离场后，公司发现尚有未移交的事宜，本人有义务配合公司完成相关事宜。<br />
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="closePeopleInfoPup"
          >取 消</el-button
        >
        <el-button type="primary" size="small" @click="sendLeave"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <HPDialog
      title="申请离场-审批流程进度"
      width="1200px"
      :visible.sync="approveFlowDialog"
      :before-close="onCloseApproveFlow"
      @close-dialog="onCloseApproveFlow"
      :center="true"
      :footer="null"
      :class="'approve-flow-dialog'"
    >
      <template v-slot:body>
        <approveFlowPath
          :list="approveFlowDate">
        </approveFlowPath>
      </template>
    </HPDialog>
  </div>
</template>

<style lang="scss">
.exit-management-container {
  height: 100%;
}
</style>
